<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智境云枢 - 多模态教学互助平台</title>
    <style>
        /* 基本样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background-color: #f4f4f4; /* 页面整体背景色 */
        }

        /* Header 样式 */
        .main-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 10px 20px;
            background-color: #333; /* 原始 header 深绿色背景 */
            color: white;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-area img {
            height: 40px;
        }

        .time-display {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.1rem;
            font-weight: bold;
        }

        .user-control {
            position: relative;
        }

        .profile-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            padding: 10px;
            border-radius: 4px;
        }

        .profile-btn:hover {
            background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停效果 */
        }

        /* 下拉菜单样式 */
        .dropdown-menu {
            position: absolute;
            top: 45px;
            right: 0;
            width: 220px;
            background-color: white;
            color: #333;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            border-radius: 6px;
            padding: 15px;
            display: none;
            z-index: 1000;
        }

        .dropdown-menu .user-info {
            margin-bottom: 10px;
        }

        .logout-btn {
            width: 100%;
            padding: 8px;
            background-color: #ef5350;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .logout-btn:hover {
            background-color: #e53935;
        }

        /* 主体内容布局 */
        .content-container {
            display: flex;
            min-height: calc(100vh - 60px);
        }

        .side-menu {
            width: 200px;
            background-color: #fff; /* 原始侧边栏背景色 */
            border-right: 1px solid #ccc;
            padding: 20px;
        }

        .menu-list {
            list-style-type: none;
        }

        .menu-item {
            display: block;
            text-decoration: none;
            color: #333;
            margin: 10px 0;
            padding: 8px;
            border-radius: 4px;
            transition: background 0.3s ease;
        }

        .menu-item:hover {
            background-color: #eee;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #fff; /* 主内容区背景色保持为白色 */
        }

        .content-frame {
            width: 100%;
            height: 90vh;
            border: none;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

<header class="main-header">

    <!-- Logo 区 -->
    <div class="logo-area">
        <img src="../web/images/图片1.png" alt="平台logo">
        <h1>智境云枢 - 多模态教学互助平台</h1>
    </div>

    <!-- 时间居中 -->
    <div class="time-display" id="timeDisplay">加载中...</div>

    <!-- 用户控件区域：靠右 -->
    <div class="user-control">
        <button class="profile-btn" id="profileBtn">👤 个人中心</button>
        <div class="dropdown-menu" id="dropdownMenu">
            <div class="user-info">
                <p>用户名：访客</p>
                <p>上次登录：<span id="lastLogin">-</span></p>
            </div>
            <button class="logout-btn">退出登录</button>
        </div>
    </div>

</header>

<main class="content-container">
    <nav class="side-menu">
        <ul class="menu-list">
            <a href="pages/realtime.html" target="contentFrame" class="menu-item">实时数据</a>
            <a href="pages/models.html" target="contentFrame" class="menu-item">模型库</a>
            <a href="pages/cad.html" target="contentFrame" class="menu-item">CAD制图</a>
            <a href="pages/3d-modeling.html" target="contentFrame" class="menu-item">3D建模</a>
            <a href="pages/d5-render.html" target="contentFrame" class="menu-item">D5实时渲染</a>
            <a href="pages/tutorials.html" target="contentFrame" class="menu-item">教学视频</a>
            <a href="pages/vr.html" target="contentFrame" class="menu-item">VR功能管理</a>
            <a href="pages/teams.html" target="contentFrame" class="menu-item">团队管理</a>
        </ul>
    </nav>
    <section class="main-content" id="contentArea">
        <iframe name="contentFrame" class="content-frame" src="pages/realtime.html"></iframe>
    </section>
</main>

<script>
    // 显示当前时间
    function updateTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        const formattedTime = now.toLocaleDateString('zh-CN', options).replace(/\//g, '-');
        document.getElementById('timeDisplay').textContent = `当前时间：${formattedTime}`;
    }
    setInterval(updateTime, 1000);
    updateTime();

    // 控制下拉菜单显示/隐藏
    const profileBtn = document.getElementById('profileBtn');
    const dropdownMenu = document.getElementById('dropdownMenu');

    profileBtn.addEventListener('click', () => {
        dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
    });

    // 点击外部关闭下拉框
    document.addEventListener('click', function(event) {
        if (!profileBtn.contains(event.target) && !dropdownMenu.contains(event.target)) {
            dropdownMenu.style.display = 'none';
        }
    });
</script>

</body>
</html>